<template>
  <view class="status_bar_classify">
    <!-- 自定义导航栏 -->
    <uni-nav-bar :statusBar="true" left-icon="back" @clickLeft="back">
      <view class="title u-f-asb" style="width: 100%"> 话题分类 </view>
    </uni-nav-bar>
    <topBar
      :linewidth="linewidth"
      :scroll="scroll"
      :tabBars="tabBars"
      :tabIndex="tabIndex"
      @topBar="topBar"
      :newspage="newspage"
    ></topBar>
    <!-- 图文列表区域 -->
    <view
      class="uni-tab-bar"
      style="width: 100vw; height: 100vh; margin-top: 40px"
    >
      <swiper
        class="swiper-box"
        :style="{ height: swiperHeight + 'px' }"
        :current="tabIndex"
        @change="tabChange"
      >
        <swiper-item v-for="(item, index) in newsList" :key="index">
          <scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
            <template v-if="item.list && item.list.length > 0">
              <!-- 每一个话题区域-->
              <block>
                <newsList
                  :nearlyObjImg="nearlyObjImg"
                  :nearlyObj="item.list"
                  :ischange="ischange"
                ></newsList>
              </block>
              <!-- 上拉加载区域-->
              <loadMore :loadtext="item.loadtext"></loadMore>
            </template>
            <template v-else>
              <noThing></noThing>
            </template>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script>
import topBar from "../../components/topbar/topbar.vue";
import newsList from "../../components/news/news-list.vue";
import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue";
import loadMore from "../../components/common/load-more.vue";
import noThing from "../../components/common/no-thing.vue";
import { statMixin } from "../../Mixin/loadmore.js";
export default {
  mixins: [statMixin],
  components: {
    uniNavBar,
    topBar,
    newsList,
    loadMore,
    noThing,
  },
  data() {
    return {
      // 顶部栏默认下标
      tabIndex: 0,
      // 主内容区域高度
      swiperHeight: 0,
      nearlyObjImg: "",
      scroll: 0,
      // 视口宽度(width)
      scrollwidth: 360,
      linewidth: 38,
      newspage: true,
      tabBars: [],
      newsList: [
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
        { list: [{}] },
      ],
      obj: {
        // img: "../../static/demo/datapic/35.jpg",
        title: "天天打卡",
        desc: "面试官，在电梯里巧遇马云你会做什么？90后女孩的回答当场被录用",
        newsnum: "507",
        today: "707",
      },
      ischange: false,
    };
  },
  onShow() {
    // this.getPersonImgInfo();
    // this.tabIndex = uni.getStorageSync("tabIndex") - 1;
  },
  onLoad(e) {
    this.getNav();
    this.getList();
    this.tabBars = uni.getStorageSync("tabBars");

    if (e.ischange) {
      this.ischange = true;
    }
  },
  methods: {
    // 获取文章分类
    async getNav() {
      let [err, res] = await this.$http.get("/topic/topiclass");
      let list = res.data.list;
      let arr = [];
      for (let i = 0; i < list.length; i++) {
        arr.push({
          id: list[i].id,
          name: list[i].classname,
        });
      }
      this.tabBars = arr;
      uni.setStorageSync("tabBars", arr);
      // this.tabBars.length > 0 && this.getList();
    },

    // 获取指定列表
    async getList() {
      let currentIndex = this.tabIndex;
      if (typeof this.newsList[this.tabIndex].page == "undefined") {
        this.newsList[this.tabIndex].page = 1;
      }

      let url = `/topic/topicclass/${this.tabIndex + 1}/topic/${
        this.newsList[this.tabIndex].page
      }`;
      let [err, res] = await this.$http.get(url);
      let list = res.data.list;

      this.newsList[currentIndex].list =
        this.newsList[currentIndex].page > 1
          ? this.newsList[currentIndex].list.concat(list)
          : list;
      this.newsList[currentIndex].firstload = true;
      console.log("WE", JSON.stringify(this.newsList, null, 4));
    },

    back() {
      uni.navigateBack({ delta: 1 });
    },
    // 顶部导航点击事件
    topBar(index) {
      this.tabIndex = index;
    },
    // 图文列表滑动
    tabChange(e) {
      this.tabIndex = e.detail.current;
    },
    // getPersonImgInfo() {
    //   uni.request({
    //     url: "https://www.xiaohui.ac.cn/netdata/api/news/follow",
    //     success: (res) => {
    //       console.log(res);
    //       this.nearlyObjImg = res.data.nearlyObjImg;
    //     },
    //   });
    // },
  },
};
</script>